<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>Axios</h1>
		<div id="aa2">
			<router-link to="/user">user</router-link>
			<router-link to="/dog">dog</router-link>
			<router-view ></router-view>
		</div>
		<template id="userTem">
			<h1>组件内容</h1>
		</template>
		<template id="dogTem">
			<div>
				<h2>dog组件</h2>
				<router-link to="/dog/samo">萨摩耶</router-link>
				<router-link to="/dog/hsq">哈士奇</router-link>
				<router-view></router-view>
			</div>
		</template>
		
		<script src="../vue.js"></script>
		<script src="../js/vue-router.js"></script>
		<script>
			let user2 = {
				template: "#userTem"
			}

			let dog2 = {
				template: "#dogTem"
			}

			let samo2 = {
				template: `<h1>好康好康</h1>`
			}

			let hsq2 = {
				template: `<h1>拆拆拆</h1>`
			}
			let router2 = new VueRouter({
				routes: [
					{path: '/', redirect: "/user"},
					{path: "/user", component: user2},
					{path: "/dog", component: dog2,
						children:[
							{path: "/dog/samo", component: samo2},
							{path: "/dog/hsq", component: hsq2}
						]}
					// {path: "/dog/samo", Comment: samo2},
					// {path: "/dog/hsq", component: hsq2}
				]
			})
			
			const a = new Vue({
				el: "#aa2",
				router: router2
			})
		</script>
	</body>
</html>
